<template>
  <div class="app-container">
    <Layout />
    <div class="main-container">
      <h2>考试中心</h2>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="学生名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入学生名称" />
        </el-form-item>
        <el-form-item label="学生性别" prop="gender">
          <el-input v-model="form.gender" placeholder="请输入学生性别" />
        </el-form-item>
        <el-form-item label="学生专业" prop="major">
          <el-input v-model="form.major" placeholder="请输入学生专业" />
        </el-form-item>
        <el-form-item label="学生年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入学生年龄" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Pagination from "@/components/Pagination";
import Layout from "@/layout";
import { autoGenerate, getAllPapers } from "@/api/autoGenerate";
import { getExams } from "@/api/exam";
// import examPaperApi from '@/api/examPaper'
// import subjectApi from '@/api/subject'

export default {
  name: "score",
  components: { Pagination, Layout },
  data() {
    return {
      papers: [],
      exams: [],
    };
  },
  created() {
    this.getAllPapers();
    this.getExams();
  },
  methods: {
    getAllPapers() {
      let _this = this;
      getAllPapers()
        .then((re) => {
          console.log(re);
          if (re.success) {
            this.papers = re.data;
          } else {
            _this.$message.error(re.message);
          }
        })
        .catch((e) => {
          _this.$message.error(re.message);
        });
    },
    getExams() {
      let _this = this;
      console.log(getExams);
      getExams({ current: 1, size: 100 })
        .then((re) => {
          console.log(re);
          if (re.records) {
            this.exams = re.records;
          } else {
            _this.$message.error("出现未知错误");
          }
        })
        .catch((e) => {
          _this.$message.error("出现未知错误");
        });
    },
    initSubject() {
      let _this = this;
      // subjectApi.list().then(re => {
      //   _this.subjectList = re.response
      //   let subjectId = _this.subjectList[0].id
      //   _this.queryParam.subjectId = subjectId
      //   _this.tabId = subjectId.toString()
      //   _this.search()
      // })
    },
    search() {
      this.listLoading = true;
      // examPaperApi.pageList(this.queryParam).then(data => {
      //   const re = data.response
      //   this.tableData = re.list
      //   this.total = re.total
      //   this.queryParam.pageIndex = re.pageNum
      //   this.listLoading = false
      // })
    },
    paperTypeChange(val) {
      this.search();
    },
    subjectChange(tab, event) {
      this.queryParam.subjectId = Number(this.tabId);
      this.search();
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  // flex-direction: row-reverse;
  justify-content: center;
  // align-items: center;

  .papers {
    border-radius: 20px;
    position: relative;
    display: flex;
    // left: 50%;
    // margin-left: -250px;
    margin-top: 50px;
    width: 500px;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background-color: rgb(249, 249, 249);

    .paper {
      padding: 10px;
      border-radius: 20px;
    }
  }

  .exams {
    border-radius: 20px;
    position: relative;
    display: flex;
    // left: 50%;
    margin-left: 50px;
    margin-top: 50px;
    width: 500px;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background-color: rgb(249, 249, 249);

    .exam {
      padding: 10px;
      border-radius: 20px;
    }
  }
}
</style>
